<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>招聘管理</el-breadcrumb-item>
      <el-breadcrumb-item>招聘渠道</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="所属组织" clearable v-model="deptName" @clear="searchRequire">
            <el-button slot="append" icon="el-icon-search" @click="searchRequire"></el-button>
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-input placeholder="招聘类型" clearable v-model="requireType" @clear="searchRequire">
            <el-button slot="append" icon="el-icon-search" @click="searchRequire"></el-button>
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-input placeholder="招聘职位名称" clearable v-model="postName" @clear="searchRequire">
            <el-button slot="append" icon="el-icon-search" @click="searchRequire"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="addRequireFormVisible=true">添加需求</el-button>
        </el-col>
      </el-row>

      <el-table :data="requireList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="招聘机构" prop="requireName" width="100"></el-table-column>
        <el-table-column label="招聘类型" prop="requireType" ></el-table-column>
        <el-table-column label="所属组织" prop="deptName"></el-table-column>
        <el-table-column label="职位ID" prop="postId"></el-table-column>
        <el-table-column label="职位编码" prop="postCode"></el-table-column>
        <el-table-column label="职位名称" prop="postName"></el-table-column>
        <el-table-column label="招聘人数" prop="numbers"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <div>
      <el-dialog title="添加渠道" :visible.sync="addRequireFormVisible" :close-on-click-modal="false">
        <el-form ref="addChannelFormRef" :rules="addRequireFormRules" :model="addRequireFrom" label-width="80px" size="mini">

          <el-form-item label="招聘机构" prop="requireName">
            <el-input v-model="addRequireFrom.requireName"></el-input>
          </el-form-item>
          <el-form-item label="招聘类型" prop="requireType">
            <el-input v-model="addRequireFrom.requireType"></el-input>
          </el-form-item>

          <el-form-item label="所属组织" prop="deptName">
            <el-input v-model="addRequireFrom.deptName"></el-input>
          </el-form-item>

          <el-form-item label="职位ID" prop="postId">
            <el-input v-model="addRequireFrom.postId"></el-input>
          </el-form-item>
          <el-form-item label="职位编码" prop="postCode">
            <el-input v-model="addRequireFrom.postCode"></el-input>
          </el-form-item>
          <el-form-item label="职位名称" prop="postName">
            <el-input v-model="addRequireFrom.postName"></el-input>
          </el-form-item>
          <el-form-item label="招聘人数" prop="numbers">
            <el-input v-model="addRequireFrom.numbers"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddRequireDialog">取 消</el-button>
          <el-button type="primary" @click="addRequire">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改渠道" :visible.sync="modifyRequireFromVisible" :close-on-click-modal="false">
        <el-form ref="modifyChannelFormRef" :rules="modifyRequireFromRules" :model="modifyRequireFrom" label-width="80px" size="mini">
          <el-form-item label="渠道ID" prop="channelId">
            <el-input v-model="modifyRequireFrom.requireName"></el-input>
          </el-form-item>
          <el-form-item label="渠道名称" prop="channelName">
            <el-input v-model="modifyRequireFrom.requireType"></el-input>
          </el-form-item>

          <el-form-item label="渠道类型" prop="channelType">
            <el-input v-model="modifyRequireFrom.deptName"></el-input>
          </el-form-item>

          <el-form-item label="渠道状态" prop="channelStatus">
            <el-input v-model="modifyRequireFrom.postId"></el-input>
          </el-form-item>
          <el-form-item label="修改人" prop="updateName">
            <el-input v-model="modifyRequireFrom.postCode"></el-input>
          </el-form-item>
          <el-form-item label="职位名称" prop="postName">
            <el-input v-model="modifyRequireFrom.postName"></el-input>
          </el-form-item>
          <el-form-item label="招聘人数" prop="numbers">
            <el-input v-model="modifyRequireFrom.numbers"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModifyRequireDialog">取 消</el-button>
          <el-button type="primary" @click="modifyRequire">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecruitRequire",
  data(){
    return{
      deptName:'',
      requireType:'',
      postName:'',
      requireList:[],
      pageNum:1,
      pageSize:2,
      total:0,

      //添加需求
      addRequireFrom:{
        requireName:'',
        requireType:'',
        deptName:'',
        postId:'',
        postCode:'',
        postName:'',
        numbers:'',
      },
      addRequireFormVisible:false,

      //校验规则
      addRequireFormRules:{

      },
      modifyRequireFrom:{
        requireName:'',
        requireType:'',
        deptName:'',
        postId:'',
        postCode:'',
        postName:'',
        numbers:'',
      },
      modifyRequireFromVisible:false,
      modifyRequireFromRules:{

      },
    }
  },
  methods:{
    searchRequire(){
    this.initRequire()
    },
    showEditDialog(row){
      this.modifyRequireFrom = row;
      this.modifyRequireFromVisible = true;
    },
    handleSizeChange(size){
      this.pageSize = size;
      this.initRequire();
    },
    handleCurrentChange(now){
      this.pageNum = now;
      this.initRequire()
    },
    removeById(id){
      let url = this.$HRMSUrl+"/require/del/"+id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(url)
            .then(res=>{
              if (res.data.code == 200){
                this.initRequire();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    initRequire(){
      let url = this.$HRMSUrl + "/require/requireList";
      console.log(this.deptName)
      this.$axios.get(url,{
        params:{
          deptName:this.deptName,
          requireType:this.requireType,
          postName:this.postName,
          now:this.pageNum,
          size:this.pageSize
        }
      }).then(res=>{
        if (res.data.code == 200){
          this.requireList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      }).catch(error=>{
        this.$message({
          type:"error",
          message:"系统错误，请联系管理员！",
          duration:1000
        })
      })
    },
    addRequire(){
      let url = this.$HRMSUrl + "/require/addRequire";
      this.$axios.post(url,this.addRequireFrom).then(
          res=>{
            if (res.data.code == 200){
              this.addRequireFormVisible = false;
              this.addRequireFrom = {};
              this.initRequire();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }
          }).catch(error=>{
        this.$message({
          type:"error",
          message:"系统错误，请联系管理员!",
          duration:1000
        })
      })
    },
    modifyRequire(){
      let url = this.$HRMSUrl+"/require/modify";
      this.$axios.put(url,this.modifyRequireFrom)
          .then(res=>{
            if (res.data.code == 200){
              this.modifyRequireFromVisible = false ;
              this.initRequire();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }
          }).catch(error=>{
        this.$message({
          type:"error",
          message:"系统错误，请联系管理员!",
          duration:1000
        })
      })
    },
    cancelAddRequireDialog(){
      this.addRequireFormVisible = false;
      this.addRequireFrom = {};
    },
    cancelModifyRequireDialog(){
      this.modifyRequireFromVisible = false;
      this.modifyRequireFrom = {};
    },
  },
  created() {
    this.initRequire();
  }
}
</script>

<style scoped>

</style>